/**
 * author jjw
 * @type {{mounted(): void}}
 */
let copyNode, copyNode1, th
// 混入方法
// export const jSortTable = {
//   mounted() {
//     const header = document.getElementsByClassName('el-table__header-wrapper')[0].querySelector('.has-gutter')
//     header.onmousedown = function(e){
//       th = e.path.find(item=>item.tagName === 'TH')
//       //复制元素
//       copyNode = th.cloneNode(true)
//       copyNode1 = th.cloneNode(true)
//       //获取偏移量
//       window.x = e.clientX - header.offsetLeft
//       window.y = e.clientY - header.offsetTop
//       window.isDown = true
//       //复制后元素挂载
//       copyNode1.style.position = 'fixed'
//       copyNode1.style.pointerEvents = 'none'
//       document.getElementsByTagName('body')[0].appendChild(copyNode1)
//     }
//     header.onmousemove = function(e){
//         if (window.isDown){
//           e.preventDefault()
//           copyNode1.style.top = e.clientY +'px'
//           copyNode1.style.left = e.clientX +'px'
//         }
//     }
//     window.onmouseup = function(e){
//       if (window.isDown){
//         window.isDown = false
//         document.getElementsByTagName('body')[0].removeChild(copyNode1)
//         const tabNode = e.path.find(item=>item.tagName === 'TH')
//         //回调函数
//         this.callback()
//         tabNode.after(copyNode)
//         e.path.find(item=>item.tagName === 'TR').removeChild(th)
//       }
//     }
//   },
//   methods:{
//
//   }
// }

function getNodeIndex(nodeList, nodeObject) {
  for (let i = 0; i < nodeList.length; i++) {
    if (nodeList[i] === nodeObject) {
      return i
    }
  }
}
// 类方法  废弃
// export class JSortTable {
//   constructor(header = 'el-table__header-wrapper', callBack, isSwitch = false,table = null) {
//     if (typeof header === 'string') {
//       this.header = document.getElementsByClassName(header)[0].querySelector('TR')
//     }else if (header instanceof HTMLElement) {
//       this.header = header
//     } else if (header instanceof Object) {
//       this.header = header.$el.querySelector('.el-table__header-wrapper').querySelector('TR')
//     }
//     this.callBack = callBack
//     this.isSwitch = isSwitch
//     this.table = table
//     this.header.onmousedown = this.mousedown(this)
//     this.header.onmousemove = this.mousemove(this)
//   }
//   mousedown(_this) {
//     return function(e) {
//       const left = document.getElementsByClassName('sidebar-container')[0].offsetWidth || 0
//       if (e.button !== 0) {
//         return
//       }
//       th = e.path.find(item => item.tagName === 'TH')
//       const right = left + th.offsetWidth + th.offsetLeft - e.clientX - _this.table.scrollLeft
//       if (right < 0) {
//         return
//       }
//       _this.oldIndex = getNodeIndex(_this.header.querySelectorAll('TH'), th)
//       // 复制元素
//       copyNode = th.cloneNode(true)
//       copyNode1 = th.cloneNode(true)
//       copyNode1.style.zIndex = '9999'
//       // 获取偏移量
//       window.isDown = true
//       // 复制后元素挂载\
//       copyNode1.style.position = 'fixed'
//       copyNode1.style.pointerEvents = 'none'
//       copyNode1.style.top = e.clientY + 'px'
//       copyNode1.style.left = e.clientX + 'px'
//       copyNode1.style.pointerEvents = 'none'
//       copyNode1.style.cursor = 'move'
//       copyNode1.style.width = th.offsetWidth + 'px'
//       copyNode1.style.height = th.offsetHeight + 'px'
//       copyNode1.style.display = 'flex'
//       copyNode1.style.justifyContent = 'center'
//       copyNode1.style.alignItems = 'center'
//       // copyNode1.classList.remove("el-table__cell")
//     }
//   }
//   mousemove(_this) {
//     return function(e) {
//       if (window.isDown) {
//         if (!window.drag){
//           _this.header.appendChild(copyNode1)
//           window.drag = true
//           window.x = copyNode1.offsetWidth / 2
//           window.y = copyNode1.offsetHeight / 2
//           window.onmouseup = _this.mouseup(_this)
//         }
//         e.preventDefault()
//         copyNode1.style.top = (e.clientY - window.y) + 'px'
//         copyNode1.style.left = (e.clientX -window.x ) + 'px'
//       }
//     }
//   }
//   mouseup(_this) {
//     return function(e) {
//       if (window.isDown) {
//         window.onmouseup = null
//         window.isDown = false
//         const tabNode = e.path.find(item => item.tagName === 'TH')
//         copyNode1.parentNode.removeChild(copyNode1)
//         // _this.header.removeChild(copyNode1)
//         window.drag = false
//         if (tabNode.innerHTML === copyNode.innerHTML) {
//           return
//         }
//         const left = document.getElementsByClassName('sidebar-container')[0].offsetWidth || 0
//         // 计算加载在元素前后
//         let evt
//         if (!_this.isSwitch) {
//           _this.newIndex = getNodeIndex(_this.header.querySelectorAll('TH'), tabNode)
//           evt = { newIndex: _this.newIndex,newNode:tabNode, oldIndex: _this.oldIndex, item: copyNode }
//         } else if (tabNode.offsetWidth / 2 < left + tabNode.offsetLeft + tabNode.offsetWidth - e.clientX) {
//           // 回调函数
//           tabNode.before(copyNode)
//           _this.newIndex = getNodeIndex(_this.header.querySelectorAll('TH'), copyNode)
//           evt = { newIndex: _this.newIndex,newNode:tabNode, oldIndex: _this.oldIndex, item: copyNode }
//         } else {
//           tabNode.after(copyNode)
//           _this.newIndex = getNodeIndex(_this.header.querySelectorAll('TH'), copyNode)
//           evt = { newIndex: _this.newIndex - 1,newNode:tabNode, oldIndex: _this.oldIndex, item: copyNode }
//         }
//         _this.callBack(evt)
//         _this.isSwitch && e.path.find(item => item.tagName === 'TR').removeChild(th)
//         _this.init()
//       }
//     }
//   }
//   init() {
//     copyNode = null
//     copyNode1 = null
//   }
//   callBack(fuc) {
//     fuc().bind(this)()
//   }
//   then(){
//
//   }
// }

export class JSortTable {
  constructor(header = 'el-table__header-wrapper', callBack, isSwitch = false,table = null) {
    if (typeof header === 'string') {
      this.header = document.getElementsByClassName(header)[0].querySelector('TR')
    }else if (header instanceof HTMLElement) {
      this.header = header
    } else if (header instanceof Object) {
      this.header = header.$el.querySelector('.el-table__header-wrapper').querySelector('TR')
    }
    this.callBack = callBack
    this.isSwitch = isSwitch
    this.table = table
    this.header.onmousedown = this.mousedown(this)
    this.header.addEventListener('dragover',this.dragover)
    this.header.addEventListener('drop',this.drop(this))
  }
  mousedown(_this) {
    return function(e) {
      console.log(e)
      const th = e.target.offsetParent
      th.draggable = true
      th.addEventListener('dragstart',_this.dragstart(_this))
    }
  }
  drop(_this){
    return function(e) {
    const tabNode = e.target.offsetParent

    if (tabNode.innerHTML === _this.th.innerHTML) {
      return
    }
    const left = document.getElementsByClassName('sidebar-container')[0].offsetWidth || 0
// 计算加载在元素前后
    let evt
    if (tabNode.offsetWidth / 2 < left + tabNode.offsetLeft + tabNode.offsetWidth - e.clientX) {
      // 回调函数
      _this.newIndex = getNodeIndex(_this.header.querySelectorAll('TH'), _this.th)
      evt = { newIndex: _this.newIndex,newNode:tabNode, oldIndex: _this.oldIndex, item: _this.th }
    } else {
      _this.newIndex = getNodeIndex(_this.header.querySelectorAll('TH'), _this.th)
      evt = { newIndex: _this.newIndex - 1,newNode:tabNode, oldIndex: _this.oldIndex, item: _this.th }
    }
    _this.callBack(evt)
  }
  }
  dragstart(_this){
    return function(e){
      _this.th = e.target
    }
  }
  dragover(e){
      e.preventDefault()
  }

}

